<template>
  <view class="themeItem">
    <navigator url="" class="box">
      <image class="pic" :src="ThemeItem.picurl" mode="aspectFill"></image>
      <view class="mask">{{ThemeItem.name}}</view>
      <view class="tab">
        <uni-dateformat :date="ThemeItem.updateTime" :threshold="[60000, 3600000]" format="MM月dd日"/>
      </view>
    </navigator>
  </view>
</template>

<script lang="ts" setup>
import type {fetchThematicSelectionList} from "@/services/http";

const {ThemeItem} = defineProps<{
  ThemeItem: Awaited<ReturnType<typeof fetchThematicSelectionList>>[number]
}>()
</script>

<style lang="scss" scoped>
.themeItem {
  .box {
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    .pic {
      width: 100%;
      height: 100%;
    }
    .mask {
      width: 100%;
      height: 70rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.2);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(20rpx);
      font-weight: 600;
    }
    .tab {
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(250,129,90,0.7);
      backdrop-filter: blur(20rpx);
      color: white;
      font-size: 22rpx; // 最小22rpx
      padding: 6rpx 14rpx;
      transform: scale(0.8);
      transform-origin: left top;
    }
  }
}
</style>